<template>
  <div>
		<van-nav-bar  :title="title" left-arrow @click-left="close" />
		<div class="register-form pd-24 mg-24 bg-white">
      <van-cell-group class="apply_main fs-32">
				<van-field
					class="fs-32"
					v-model="pageData.UserName"
					clearable
					label="姓名"
					placeholder="请输入您的真实姓名"
				/>
				<van-field label="性别" class="fs-32">
					<template #input>
						<van-radio-group v-model="UserSex" class="flex" :disabled="!isNew && !isEdit">
							<van-radio name="1" class="mr-24 fs-28" checked-color="#16AD56">男</van-radio>
							<van-radio name="2" class="fs-28" checked-color="#16AD56">女</van-radio>
						</van-radio-group>
					</template>
        </van-field>
				<div class="idtype mr-24 ptb-24">
					<div class="idtype_title">证件类型</div>
					<van-dropdown-menu >
						<van-dropdown-item v-model="UserIdentType" :disabled="!isNew && !isEdit" :options="option1" @change="change1" ref="filterDropdown"/>
					</van-dropdown-menu>
					<svg-icon icon-class="right" class="fs-24 ml-10" @goPage="goOpen"/>
				</div>
				<van-field
					class="fs-32"
					v-model="pageData.UserIdentityCard"
					clearable
					label="证件号码"
					placeholder="请输入证件号码"
				/>
				<van-field
					class="fs-32"
					v-model="pageData.UserTel"
					clearable
					label="联系电话"
					placeholder="请输入手机号码"
				/>
			
				<div class="project mr-24 pb-24">
					<div class="apply_title">上传入住人证件照</div>
					<div class="fs-24 color-gray-light ml-5">请拍摄证件原件,并使证件边缘完整,文字清晰,光线均匀。</div>
					<van-cell class="ptb-20 pr-30">
						<van-uploader
						
							:disabled ="!isEdit && !isNew"
							slot="title"
							v-model="UserIdentCardImages"
							class="advertPictures"
							:after-read="(file)=>{afterRead(file,'UserIdentCardImages')}"
							preview-size="2rem"
							@delete="(file,detail)=>{afterDelete(file,detail,'UserIdentCardImages')}"
							:deletable="isEdit || isNew"
						/>
					</van-cell>
				</div>
			</van-cell-group>
		</div>
		<div class="mtb-30 plr-40 ptb-16 bg-white" v-if="isNew">
      <van-button  size="large" class="bg-primary color-white br-44" @click="submit">提交</van-button>
    </div>
		<div v-else-if="isEdit" class="roomBtn">
			<button @click="updateCheckIn" class="repair">修改</button>
			<button @click="deleteCheckIn" class="btn">删除</button>
		</div>
	</div>
</template>
<script>
import { upLoad } from 'api/upload'

export default {
	props: {
		checkInData: {
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    },
    checkInIndex: {
      type: Number,
      required: false,
      default: -1
    },
		isEdit: {
      type: Boolean,
      default: false
    },
	},
	data() {
    return {
      avar: [],
      photo: [],
      certificates: [],
			UserIdentCardImages: [],
      pageData: {
				UserIdentCardImages: [],
			},
			ID: 0, //技师id(默认为0,提交申请之后生成一个)
      identify: {
        // 随机产生验证码的字符串
        identifyCodes: '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ',
        identifyCode: ''
      },
			option1:[
				{
					text:'身份证',
					value: 0,
				},
				{
					text:'护照',
					value: 1,
				},
				{
					text:'港澳通行证',
					value: 2,
				},
			],
			UserSex: '1',
			UserIdentType: 0,
			dropdownType: false,
			title: '添加入住人',
			isNew: true, //是否新增
    }
  },
	watch: {
    checkInData(newVal, oldVal) {
      this.initData(newVal)
    },
  },
	created(){
		
	},
	mounted(){
		this.initData(this.checkInData)
	},
	methods: {
		initData(data) {
      // copy数据，保留原来的数据，修改再新数据中完成
      this.pageData = JSON.parse(JSON.stringify(data))
			console.log(this.pageData,'数据')
      if (JSON.stringify(this.pageData) === '{}') {
        this.title = '添加入住人'
        this.isNew = true
				this.pageData.UserIdentCardImages = []
				this.UserIdentCardImages = []
				this.UserSex =  '1'
      } else {
        this.title = '查看入住人'
        this.isNew = false
				this.UserSex = this.pageData.UserSex + ''
				this.UserIdentCardImages = []
				this.UserIdentType = this.pageData.UserIdentType
				if(this.pageData.UserIdentCardImages && this.pageData.UserIdentCardImages.length > 0){
					this.pageData.UserIdentCardImages = this.pageData.UserIdentCardImages.split(',')
					for (let i = 0, len = this.pageData.UserIdentCardImages.length; i < len; i++) {
						if(this.pageData.UserIdentCardImages[i] != ''){
							this.UserIdentCardImages.push({
								url: this.$webInfo.ImgDomain + this.pageData.UserIdentCardImages[i]
							})
						}
					}
				}else{
					this.UserIdentCardImages = []
				}
      }
    },
    afterRead(file, type) {
      if (file.length) {
        for (let i = 0, len = file.length; i < len; i++) {
          upLoad({
            Content: this.$utils.getCaption(file[i].content, 'base64,'),
            FileType: this.$utils.getCaption(file[i].file.type, '/')
          }).then(res => {
            if (res) {
              this.pageData.UserIdentCardImages.push(res.Data.Path)
            }
          })
        }
      } else {
        upLoad({
          Content: this.$utils.getCaption(file.content, 'base64,'),
          FileType: this.$utils.getCaption(file.file.type, '/')
        }).then(res => {
          if (res) {
            this.pageData.UserIdentCardImages.push(res.Data.Path)
						
          }
        })
      }
    },
		afterDelete(file, detail, type) {
			this.pageData.UserIdentCardImages.splice(detail.index, 1)
    },
    
   
		close(){
			this.$emit('close')
		},
		change1(ID){
			this.UserIdentType = ID
		},
		goOpen(){
			this.$refs.filterDropdown.toggle()
		},
		submit() {
			//if (this.pageData.userName == '') {
			//	this.$toast('请输入姓名')
			//	return
			//}
			//if (this.pageData.userIdentityCard == '') {
			//	this.$toast('请输入身份证号')
			//	return
			//} else {
			//	if (this.pageData.userIdentityCard.length < 18 || !(
			//			/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(this.pageData.userIdentityCard))) {
			//		this.$toast('请输入正确身份证号')
			//		return
			//	}
			//}
			//if (this.pageData.userTel == '') {
			//	this.$toast('请输入联系电话')
			//	return
			//} else {
			//	if (this.pageData.Phone < 11 || !(/^1[23456789]\d{9}$/.test(this.pageData.userTel))) {
			//			this.$toast('请输入正确联系电话')
			//			return
			//	}
			//}
			this.pageData.UserSex = this.UserSex
			this.pageData.UserIdentType = this.UserIdentType
			if(this.pageData.UserIdentCardImages.length > 0){
				this.pageData.UserIdentCardImages = this.pageData.UserIdentCardImages.toString()
			}else{
				this.pageData.UserIdentCardImages = ''
			}
			this.$emit('checkIn',this.pageData,this.checkInIndex)
		},
		updateCheckIn() {
			this.pageData.UserSex = this.UserSex
			this.pageData.UserIdentType = this.UserIdentType
			if(this.pageData.UserIdentCardImages.length > 0){
				this.pageData.UserIdentCardImages = this.pageData.UserIdentCardImages.toString()
			}else{
				this.pageData.UserIdentCardImages = ''
			}
			this.$emit('checkIn',this.pageData,this.checkInIndex)
		},
		deleteCheckIn() {
			this.$emit('deleteCheckIn',this.checkInIndex)
		}
  },
}
</script>
<style lang="scss" scoped>
	.remark{
		background: #f7f7f7;
		padding-left: 32px !important;
	}	
	.idtype{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ebedf0;
		margin-left: 10px;
	}
	.project{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		border-bottom: 1px solid #ebedf0;
		margin-left: 20px;
	}
	.idtype_title{
		font-size: 32px;		
		position: relative;
		width: 210px;
		margin-left: 20px;
	}
	.apply_title{
		margin: 20px 0 0 5px;
		font-size: 32px;		
		position: relative;
	}
	.project:last-child{
		border-bottom: none;
	}
	[class*=van-hairline]::after {
  	border: none;
	}
	.project{
		.van-cell{
			padding-left: 0;
		}
	}
	.left-star{
		padding-left: 15px;
		&::before{
			content: "*";
			color: #FF0202;
			position: absolute;
			font-size: 28px;
			top: 5px;
			left: 0;
		}
	}
	/deep/.van-dropdown-menu__bar{
		height: 30px;
    line-height: 30px;
    background: none;
		box-shadow: none;
	}
	/deep/.van-dropdown-menu{
		width:calc(100% - 105px);
	}
	/deep/.van-dropdown-menu__title{
		width: 100%;
	}
	/deep/.van-dropdown-menu__title::after{
		border:none;
	}
	.roomBtn{
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding: 24px;
	}
	.repair{
		width: 324px;
		height: 80px;
		line-height: 80px;
		background: $primary15;
		border-radius: 44px;
		text-align: center;
		color: #fff;
		font-size: 34px;
	}
	.btn{
		width: 324px;
		height: 80px;
		line-height: 80px;
		background: #FF0202;
		border-radius: 44px;
		text-align: center;
		color: #fff;
		font-size: 34px;
	}
</style>
